<template>
  <div>
    <!-- 顶部导航栏  vantui-导航组件-NavBar-->
    <div>
      <van-sticky>
        <van-nav-bar title="我的订单">
          <template #right>
            <van-icon name="search" size="22" color="#000" @click="onSearch" />
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>
    <!-- 已登录状态-->
    <van-tabs
      v-model="active"
      type="line"
      animated
      v-if="uid"
      @click="getData(active)"
      sticky
      :offset-top="50"
    >
      <!-- 请求数据前判断数据是否存在 -->
      <van-tab title="全部">
        <div v-if="orderList.length == 0">
          <van-empty description="暂无该类型的订单">
            <van-button
              round
              type="delOrder"
              color="#f5b400"
              class="bottom-button"
              to="/home"
              >去探索</van-button
            >
          </van-empty>
        </div>
        <div v-else class="orderInfo">
          <van-card
            v-for="item in orderList"
            :key="item.id"
            :num="item.room_num"
            :tag="item.oid == 0 ? '未付款' : '已付款'"
            :price="item.room_prcie.toFixed(2)"
            :desc="`订单编号XED${item.id}00364521`"
            :title="item.hotel_title"
            :thumb="item.room_img"
            @click="seeMore(item.id)"
          >
            <template #tags>
              <van-tag plain type="danger">{{ item.room_type }}</van-tag>
            </template>
            <template #footer>
              <van-button size="normal" @click.stop="delOrder(item.id)"
                >删除</van-button
              >
              <van-button size="normal" @click.stop="orderAgain(item.hid)"
                >再次预订</van-button
              >
            </template>
            <template> </template>
          </van-card>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div v-if="orderList.length == 0">
          <van-empty description="暂无该类型的订单">
            <van-button
              round
              type="delOrder"
              color="#f5b400"
              class="bottom-button"
              to="/home"
              >去探索</van-button
            >
          </van-empty>
        </div>
        <div v-else class="orderInfo">
          <van-card
            v-for="item in orderList"
            :key="item.id"
            :num="item.room_num"
            :price="`${item.room_prcie.toFixed(2)}`"
            :desc="`订单编号XED${item.id}00364521`"
            :title="item.hotel_title"
            :thumb="item.room_img"
            @click="seeMore(item.id)"
          >
            <template #tags>
              <van-tag plain type="danger">{{ item.room_type }}</van-tag>
            </template>
            <template #footer>
              <van-button size="normal" @click.stop="delOrder(item.id)"
                >删除</van-button
              >
              <van-button size="normal" @click.stop="orderAgain(item.hid)"
                >再次预订</van-button
              >
            </template>
            <template> </template>
          </van-card>
        </div>
      </van-tab>
      <van-tab title="待付款">
        <div v-if="orderList.length == 0">
          <van-empty description="暂无该类型的订单">
            <van-button
              round
              type="delOrder"
              color="#f5b400"
              class="bottom-button"
              to="/home"
              >去探索</van-button
            >
          </van-empty>
        </div>
        <div v-else class="orderInfo">
          <van-card
            v-for="item in orderList"
            :key="item.id"
            :num="item.room_num"
            :price="item.room_prcie.toFixed(2)"
            :desc="`订单编号XED${item.id}00364521`"
            :title="item.hotel_title"
            :thumb="item.room_img"
            @click="seeMore(item.id)"
          >
            <template #tags>
              <van-tag plain type="danger">{{ item.room_type }}</van-tag>
            </template>
            <template #footer>
              <van-button size="normal" @click.stop="delOrder(item.id)"
                >删除</van-button
              >
              <van-button size="normal" @click.stop="orderAgain(item.hid)"
                >再次预订</van-button
              >
            </template>
            <template> </template>
          </van-card>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 未登录状态 -->
    <van-tabs v-model="active" type="line" animated v-if="!uid">
      <van-tab title="全部">
        <van-empty description="暂无该类型的订单">
          <van-button
            round
            type="delOrder"
            color="#f5b400"
            class="bottom-button"
            to="/login"
            >去登录</van-button
          >
        </van-empty>
      </van-tab>
      <van-tab title="已付款">
        <van-empty description="暂无该类型的订单">
          <van-button
            round
            type="delOrder"
            color="#f5b400"
            class="bottom-button"
            to="/login"
            >去登录</van-button
          >
        </van-empty>
      </van-tab>
      <van-tab title="未付款">
        <van-empty description="暂无该类型的订单">
          <van-button
            round
            type="delOrder"
            color="#f5b400"
            class="bottom-button"
            to="/login"
            >去登录</van-button
          >
        </van-empty>
      </van-tab>
    </van-tabs>
    <!-- 底部导航栏-->
    <bottom-tabbar />
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import BottomTabbar from "@/components/BottomTabbar.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      active: 0,
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    ...mapState({
      orderList: ((state) => state.order.orderList) || [],
    }),
  },
  methods: {
    onSearch() {
      this.$router.push({
        path: "/search",
      });
    },
    getData() {
      if (this.active == 0) {
        this.$store.dispatch("getAllOrderInfo", this.uid);
        console.log(111);
      } else if (this.active == 1) {
        this.$store.dispatch("getOrderInfo", { uid: this.uid, oid: "1" });
      } else {
        this.$store.dispatch("getOrderInfo", { uid: this.uid, oid: "0" });
      }
    },
    // 删除订单
    delOrder(id) {
      Dialog.confirm({
        title: "确认删除订单?",
        message: "删除后订单记录将无法恢复?",
      })
        .then(() => {
          let res = this.$store.dispatch("delOrder", id);
          res.then(() => {
            Toast("删除成功");
            this.getData();
          });
        })
        .catch(() => {
          Toast("取消删除");
        });
    },
    // 再次预定
    orderAgain(hid) {
      this.$router.push(`/hotel?id=${hid}`);
    },
    // 查看详情
    seeMore(id) {
      // sessionStorage.setItem("orderdetail", JSON.stringify(k));
      this.$router.push(`/orderdetail?id=${id}`);
    },
  },
  components: { BottomTabbar },
};
</script>

<style lang="scss" scoped>
.bottom-button {
  width: 10rem;
  height: 2.5rem;
}
//顶部导航栏背景色
.van-nav-bar {
  background-color: #fff;
}
//顶部导航栏标题
::v-deep .van-nav-bar__title {
  font-size: 1.125rem;
  color: #000;
}
::v-deep .van-nav-bar__content {
  height: 3.125rem;
}
::v-deep.van-tabs--line .van-tabs__wrap {
  height: 3rem;
}
::v-deep .van-tab__text--ellipsis {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: #323233;
}
//选中项下划线颜色
::v-deep .van-tabs__line {
  background-color: #f5b400;
}
//选中项字体颜色
::v-deep .van-tab--active {
  color: #f5b400;
}
//订单展示页卡片
.van-card {
  padding: 1rem 1rem;
  font-size: 1.25rem;
}
//酒店标题
::v-deep .van-card__title {
  font-weight: 600;
  line-height: 2rem;
  font-size: 1rem;
}
//入住日期时间描述
::v-deep .van-card__desc {
  color: grey;
  line-height: 1.125rem;
  font-size: 0.95rem;
}
//左上标签
.van-tag--mark {
  color: #fff;
  background-color: #666;
}
//右下标签
.van-tag--danger.van-tag--plain {
  color: #666;
}
//右下房间数量
::v-deep.van-card__num {
  color: black;
  font-size: 1rem;
}
//价格栏
::v-deep .van-card__price {
  font-size: 1rem;
  font-weight: bold;
  color: #000;
}
//自定义图片
::v-deep .van-card__thumb {
  width: 5.625rem;
  height: 5.625rem;
}
//按钮
::v-deep .van-card__footer .van-button {
  border-radius: 10%;
  border: 0.0625rem solid whitesmoke;
  background-color: #f5b400;
}
.van-button {
  height: 2rem;
  border: none;
}
//按钮内置文字样式
::v-deep .van-button__content {
  color: #fff;
}
//俩按钮的间距
.van-card__footer .van-button {
  margin-left: 0.625rem;
}
</style>
